.home {
  background-color: #F7F8FA;
  .home-head-box {
    padding: 20px 20px 26px 40px;
    background-color: #fff;
    .max-wrapper {
      max-width: 1460px;
      margin: 0 auto;
    }
    .title-and-switch {
      display: flex;
      justify-content: left;
      margin-bottom: 20px;
      .home-title {
        font-weight: 500;
        font-size: 16px;
        color: #1E2126;
        letter-spacing: 0.1px;
        line-height: 24px;
        margin-right: 12px;
      }
      .edit-button-group {
        display: flex;
        flex-direction: row;
        justify-content: end;
        .page-change-url {
          background: #F7F8FA;
          border-radius: 4px;
          padding: 4px 8px;
          margin-left: 8px;
          cursor: pointer;
          user-select: none;
          text-align: center;
          font-size: 10px;
          color: #4e5b71;
          letter-spacing: 0;
          line-height: 16px;
          transition: all ease 0.3s;
          &:hover {
            color: #1F70FC;
          }
          &:focus {
            color: #1F70FC;
          }
        }
      }
    }

    .tenant-info-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .main-info {
        display: flex;
        flex-direction: row;
        justify-content: left;
        .img-wrap {
          height: 56px;
          border-radius: 12px;
          overflow: hidden;
          margin-right: 20px;
          .img {
            height: 56px;
          }
        }
        .company-content {
          .company-line {
            display: flex;
            justify-content: left;
            margin-bottom: 4px;
            .home-company-name {
              font-weight: 500;
              font-size: 20px;
              color: #1E2126;
              letter-spacing: 0.2px;
              line-height: 28px;
              margin-right: 8px;
            }
            .new-trial-info, .new-test-info {
              margin-top: 4px;
              display: block;
              border-radius: 20px;
              line-height: 20px;
              font-size: 12px;
              padding: 0 9px;
            }
            .new-trial-info {
              color: #FF6680;
              background: #FFE8EC;
            }
            .new-test-info{
              color: #4B8DFF;
              background: #E4EEFF;
            }
          }
          .company-detail {
            font-size: 12px;
            color: #848C95;
            letter-spacing: 0.1px;
            line-height: 16px;
            .create-time {
              font-size: 12px;
              color: #848C95;
              line-height: 16px;
              margin-right: 8px;
            }
            .remain-box {
              cursor: pointer;
              height: 24px;
              padding: 4px 6px 4px 10px;
              border-radius: 2px;
              background-color: #fff;

              .anticon {
                transform: rotate(90deg);
                margin-left: 4px;
              }

              .content {
                font-size: 12px;
                color: #4E5B71;
                line-height: 16px;
              }

              &:hover {
                background-color: #F7F8FA;
              }

              .round-indicator {
                position: relative;
                top: 0.5px;
                display: inline-block;
                width: 4px;
                height: 10px;
                border-radius: 2px;
                margin-right: 4px;
                &.red {
                  background-color: #FF6680;
                }
                &.green {
                  background-color: #32CD91;
                }
              }
            }
            .trial-date {
              font-size: 12px;
              color: #4E5B71;
              line-height: 16px;
              min-width: 200px;
            }
            .btn-box {
              text-align: right;
              margin-top: 8px;
              .ant-btn {
                margin-left: 8px;
              }
            }
          }
        }
      }
      .tenant-index-box {
        height: 1px;
        flex-shrink: 0;
        transform: translateY(-35px);
        .index-box {
          display: flex;
          justify-content: right;
        }
        .single-index {
          padding: 0 30px;
          margin-left: 10px;
          &.green-bar {
            .ant-progress .ant-progress-outer .ant-progress-inner {
              background-color: #EBF0F5;
              .ant-progress-bg {
                background-color: #32CD91;
              }
            }
          }
          &.blue-bar {
            .ant-progress .ant-progress-outer .ant-progress-inner {
              background-color: #EBF0F5;
              .ant-progress-bg {
                background-color: #1CAEFF;
              }
            }
          }

          .number {
            font-weight: 500;
            font-size: 24px;
            color: #1E2126;
            letter-spacing: 0.1px;
            text-align: center;
            line-height: 36px;
          }

          .index-name {
            font-size: 14px;
            color: #4E5B71;
            letter-spacing: 0.1px;
            text-align: center;
            line-height: 20px;
          }

          .ratio-text {
            font-size: 9px;
            color: #B5C0CE;
            letter-spacing: 0.08px;
            text-align: center;
            line-height: 12px;
          }
        }
      }
    }
  }
  .home-content {
    padding: 20px;
    .home-title {
      font-weight: 500;
      font-size: 16px;
      color: #1E2126;
      letter-spacing: 0.1px;
      line-height: 24px;
      margin-right: 12px;
    }
    .max-content {
      width: calc(100%);
      max-width: 1480px;
      margin: 0 auto;
      .two-third-content {
        width: calc((100% - 40px)/3*2 + 20px);
        margin: 0 20px 0 0;
        display: inline-block;
        float: left;
      }
      .one-third-content {
        display: inline-block;
        width: calc((100% - 40px)/3);
        float: left;
      }
      .bottom-banner {
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        width: 100%;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

@media screen and (max-width: 1400px) {
  .home .home-content .max-content {
    .two-third-content {
      width: calc((100% - 20px)/2);
      margin: 0 20px 20px 0;
    }
    .one-third-content {
      width: calc((100% - 20px)/2);
    }
    &.one-chart {
      .helios-service-charts {
        &:nth-child(2n + 0) {
          margin-right: 0;
        }
        &:nth-child(2n + 1) {
          margin-right: 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 1180px) {
  .home .home-head-box .tenant-info-box .tenant-index-box .single-index {
    padding: 0 15px;
    margin-left: 8px;
  }
}
